<template>
  <div class="order">
    <div class="checkAll">
      <!-- <input type="checkbox" :value="allChecked" @click="checkAllHandler">全选/不全选 -->
      <el-checkbox :value="allChecked" @change="checkAllHandler">全选/不全选</el-checkbox>
    </div>
    <div class="demo-input-suffix" v-if="isSearch">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2">
      </el-input>
    </div>
    <div class="goods">
      <ul>
        <li
        v-for="item in cart"
        :key="item.id">
          <!-- <input type="checkbox" :value="item.checked" @click="changeProdCheckedHandler(item.payId)"> -->
          <el-checkbox :value="item.checked" @change="changeProdCheckedHandler(item.payId)"></el-checkbox>
          <div class="goods-body">
            <div class="goods-image">
              <img :src="item.roomImage" alt="">
            </div>
            <div class="message">
              <h2>{{item.roomName}}</h2>
              <span>{{item.roomName}}</span>
              <span>入住日期：{{item.checkTime}}~{{item.leaveTime}}</span>
              <span>入住人：{{item.name}}</span>
            </div>
            <div class="money">
              <div class="price">
              房价：<span>￥{{item.payMoney}}</span>
              </div>
              <div class="biaoqian">
                <el-tag v-if="!isPay" type="danger">未支付</el-tag>
                <el-tag v-if="isPay" type="success">已支付</el-tag>
                <el-tag v-if="noEnter" type="warning">未入住</el-tag>
                <el-tag v-if="isEnter" type="success">已入住</el-tag>
                <el-row>
                  <el-button type="danger" @click="removeFromCartHandler(item.payId)">删除房间</el-button>
                </el-row>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="total">
      <div class="right">
        总金额：<span>￥{{totalMoney}}</span>
        <button @click="submitHandler(cart)">立即结算</button>
      </div>
    </div>
  </div>
</template>

<script>
// import { order } from '../../api/order'
import { getOrder, delRequist } from '../../api/order'
export default {
  name: 'Order',
  data () {
    return {
      data: {},
      isChecked: true,
      goods: {},
      money: 0,
      checked: true,
      isPay: false,
      noEnter: false,
      isEnter: false,
      isSearch: false, // 是否显示搜索框
      input2: ''
    }
  },
  created () {
    // 判断是否登录
    // if (sessionStorage.getItem('userName')) {
    //   var username = 'wwwy'
    //   order(username).then(res => {
    //     this.data = res.data
    //   }).catch(err => console.log(err))
    //   // this.goods = this.$refs.goodsCheck
    //   // console.log(this.$refs.goodsCheck)
    // } else {
    //   const abc = localStorage.getItem('cart')
    //   this.data = JSON.parse(abc)
    //   // console.log(localStorage.getItem('cart', JSON.parse(this.user)))
    //   console.log(this.data)
    //   console.log(123)
    // }
    const userName = sessionStorage.getItem('userName')
    getOrder(userName).then(res => {
      for (var i = 0; i < res.data.length; i++) {
        res.data[i].payId = res.data[i].orderNo
        this.$store.commit('addToCart', res.data[i])
      }
      // this.$store.commit('addToCart', res.data[0])
    }).catch(err => console.log(err))
  },
  computed: {
    cart () {
      return this.$store.state.cart
    },
    allChecked () {
      return this.$store.getters.allChecked
    },
    totalMoney () {
      return this.$store.getters.totalMoney
    }
  },
  methods: {
    // checkAll (event) {
    //   this.isChecked = event.target.checked
    //   this.goods = this.$refs.goodsCheck
    //   this.goods.map(item => {
    //     item.checked = this.isChecked
    //     if (this.isChecked) {
    //       this.money += parseInt(item.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.innerHTML.slice(1))
    //     } else {
    //       this.money = 0
    //     }
    //     return item
    //   })
    // },
    // checkGoods (event) {
    //   if (!event.target.checked) {
    //     this.$refs.checkAll.checked = event.target.checked
    //     console.log(event.target)
    //     this.money = this.money - parseInt(event.target.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.innerHTML.slice(1))
    //   } else {
    //     this.money = this.money + parseInt(event.target.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.innerHTML.slice(1))
    //   }
    // }

    // 删除房间
    removeFromCartHandler (id) {
      this.$store.commit('removeFromCart', id)
      delRequist(id).then(res => {
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
        this.$message({
          showClose: true,
          message: '网络错误，请稍后重试',
          type: 'error'
        })
      })
    },
    // 选中/取消
    changeProdCheckedHandler (id) {
      this.$store.commit('changeProdChecked', id)
    },
    // 全选
    checkAllHandler () {
      this.$store.commit('checkAll', this.allChecked)
    },
    // 确认订单
    submitHandler (prod) {
      this.$router.push({
        path: 'pay'
        // query: {
        //   prod
        // }
      })
      this.$store.commit('submitHandler')
    }
  }
}
</script>

<style lang="scss">
.order{
  min-height: 700px;
  padding: 0 12%;
  .checkAll{
    margin-top: 150px;
    margin-bottom: 25px;
    .el-checkbox__inner{
            width: 18px;
            height: 18px;
    }
    .el-checkbox__inner::after{
            height: 9px;
            left: 6px;
    }
  }
  .demo-input-suffix{
    width: 300px;
    margin: 0 0 20px 33px;
  }
  .goods{
    width: 100%;
    ul{
      li{
        display: flex;
        margin-bottom: 10px;
        .el-checkbox{
          width: 12.8px;
          height: 12.8px;
          margin-right: 20px;
          margin-top: 80px;
          .el-checkbox__inner{
            width: 18px;
            height: 18px;
          }
          .el-checkbox__inner::after{
            height: 9px;
            left: 6px;
          }
        }
        .goods-body{
          min-width: 1000px;
          flex: 1;
          padding: 20px;
          background: rgb(253, 249, 249);
          .goods-image{
            height: 145px;
            width: 145px;
            background: red;
            float: left;
            margin-right: 10px;
            img{
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .message{
            float: left;
            h2{
              font-size: 28px;
              color: rosybrown;
              margin-bottom: 10px;
            }
            span{
              display: block;
              color: #666;
              line-height: 35px;
            }
          }
          .money{
            float: right;
            color: #666;
            .price{
              text-align: right;
              &>span{
                width: 120px;
                font-size: 28px;
                color: rgb(243, 95, 78);
                display: inline-block;
                text-align: left;
              }
            }
            .el-tag{
              margin-left: 15px;
            }
            .el-row{
              margin-top: 60px;
              margin-left: 50px;
              display: inline-block;
            }
          }
        }
      }
    }
  }
  .total{
    width: 100%;
    height: 100px;
    font-size: 20px;
    color: #666;
    .right{
      // width: 100px;
      float: right;
      span{
        width: 130px;
        font-size: 28px;
        color: rgb(243, 95, 78);
        display: inline-block;
      }
      button{
        display: block;
        width: 173px;
        height: 50px;
        background: rgb(243, 95, 78);
        border: none;
        color: white;
        font-size: 22px;
        margin-top: 10px;
      }
    }
  }
}
</style>
